<template>
  <div>
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">产品中心-实木复合地板-木材分级</div>
    <div class="content">

       <div class="content-title">
         <h4>
           每一棵树都是独一无二的，甚至同一棵树的不同部分制成的木板外观都不尽相同。疤结和木纹是木材分级的依据同时也给木材带来了诸多活力。我们的木地板富于更多的活力及多样性，这也是为什么我们研发了一个分级系统来帮助您发掘心仪的地板。
         </h4>
       </div>
       <div class="scroll-box">

          <div class="scorll-item">
            <div class="scroll-img">
              <img src="http://www.pergo.com.cn/sites/default/files/wood/level/you_xuan_.jpg" alt="">
            </div>
            <div class="scorll-text">
              <h3>优选</h3>
              <p>树节最大 20 mm；颜色、结构各异。</p>
            </div>
          </div>
           <div class="scorll-item">
            <div class="scroll-img">
              <img src="http://www.pergo.com.cn/sites/default/files/wood/level/huo_po_.jpg" alt="">
            </div>
            <div class="scorll-text">
              <h3>活泼</h3>
              <p>
               树节最大 50 mm；色彩、结构变化生动有趣。
              </p>
            </div>
          </div>
          <div class="scorll-item">
            <div class="scroll-img">
              <img src="http://www.pergo.com.cn/sites/default/files/wood/level/zi_ran_.jpg" alt="">
            </div>
            <div class="scorll-text">
              <h3>自然</h3>
              <p>
               树节最大 80 mm，有裂纹；色彩、结构变化生动有趣，外观赋予了一种质朴的乡村气息。
              </p>
            </div>
          </div>
        </div>

        <div class="content-bottom">
          <van-cell title="三层实木地板产品等级划分-PDF" size="large" is-link />
        </div>

    </div>
    <c-footer></c-footer>
  </div>
</template>

<script>
import { Cell, CellGroup } from 'vant';
  export default {
    name:'',
    props:[''],
    data () {
      return {
        type: this.$route.query.type ? this.$route.query.type : 0,
      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
       getType(type) {
        this.type = type
      },
    },

    watch: {}

  }

</script>
<style lang='less' scoped>
.content{
  padding: 0 .25rem;
  margin-bottom: 0.7rem;
.content-title{
 padding: 0.3rem 0;
}
}
.scroll-box{
 
  margin-top: 0.3rem;
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
  .scorll-item{
    width: 3.75rem;
    flex-shrink: 0;
    margin-right: 0.4rem;
    .scroll-img{
        img{
          width: 3.75rem;
          height: 3.75rem;
        }
      }
      .scorll-text{
        &>p{
          color: #6e6e6e;
           white-space: normal;
        }
      }
  }
  
}
.content-bottom{
  height: 1.2rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
.van-cell__title span{
  font-weight: bold;
 
}
.van-cell{
 padding: 0;
}
</style>